import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { Common } from 'UtilsCommon';
import { Input } from 'antd';
import Base from './base';
import SpanText from './spanText';

const { TextArea, Search } = Input;

const setMinMaxValue = (value, property) => {
    if (Common.isNullOrEmpty(value)) return value;

    const { minValue, maxValue, dataType } = property;
    if (dataType !== 'int' && dataType !== 'float') return value;

    if (Common.isNullOrEmpty(minValue) && Common.isNullOrEmpty(maxValue)) return value;

    const v = Common.getFloat(value);

    if (!Common.isNullOrEmpty(minValue) && v < minValue) value = minValue;
    else if (!Common.isNullOrEmpty(maxValue) && v > maxValue) value = maxValue;

    return value;
};

const judgeMinusDot = (value) => {
    if (value === '-') return true;
    if (value === '.') return false;

    if (value.substring(value.length - 1, value.length) === '0') return true;

    if (value.substring(0, value.length - 1).indexOf('.') > 0) return false;

    return value.substring(value.length - 1) === '.';
};

const change = (e, property, setValue) => {
    let value = e.target.value;

    if (value && property.RegExp) value = value.replace(property.RegExp, '');
    if (value && property.dataType === 'float' && !judgeMinusDot(value)) value = Common.getNumber(value, property.scale);
    if (value && property.dataType === 'int') value = Common.getInt(value);

    if (value === 0 && e.target.value !== '0') value = '';

    value = setMinMaxValue(value, property);

    setValue(value);
    Base.bindDataValue(property, value);
};

const pressEnter = (property, pageAxis) => {
    const { pressEnterEventActionName, pressEnterEventPropertyName } = property;
    if (pressEnterEventActionName) {
        const props = { pageAxis };
        if (pressEnterEventPropertyName) props.property = pageAxis.getProperty(pressEnterEventPropertyName);
        else props.property = property;

        pageAxis.invokeEventAction(pressEnterEventActionName, props);
    }
};

const valueChange = (property, value, view) => {
    if (property.valueChange) property.valueChange(value, property, view);
};

const reneraddonAfter = (property, pageId, value) => {
    if (property.isValueAddonAfter && Common.isNullOrEmpty(value)) return null;
    if (property.addonAfterButton) return <SpanText property={property.addonAfterButton} view={property} pageId={pageId} />;

    return property.addonAfter;
};

export default (props) => {
    const { property, view, pageAxis, pageId } = Base.getProps(props);
    const obj = useMemo(() => ({}), []);
    const [value, setValue] = useState(Base.getInitValue(property, obj));
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [disabled, setDisabled] = useState(!!property.disabled);
    const [isReadOnly, setIsReadOnly] = useState(!!property.isReadOnly);

    const onChange = useCallback((e) => {
        property.isChanged = true;
        change(e, property, setValue);
    }, [property, setValue]);

    const onBlur = useCallback(() => {
        property.onBlur && property.onBlur(value);
    }, [property, value]);

    const onPressEnter = useCallback(() => {
        pressEnter(property, pageAxis);
    }, [property, pageAxis]);

    const onSearch = useCallback((searchValue) => {
        pageAxis.invokeEventAction(property.eventActionName, { property, view, pageAxis, searchValue });
    }, [property, view, pageAxis]);

    useEffect(() => {
        valueChange(property, value, view);
    }, [property, value, view]);

    useEffect(() => {
        if (property.invokeEventId !== property.execEventId) {
            property.execEventId = property.invokeEventId;
            pageAxis.invokeEventAction(property.eventActionName, { property, view, pageAxis });
        }
    }, [property.invokeEventId, property, view, pageAxis]);

    property.setIsVisible = (v) => setIsVisible(v);
    property.setValue = (v) => setValue(v);
    property.getValue = () => Base.getValue(property, value);
    property.setDisabled = (v) => setDisabled(v);
    property.setIsReadOnly = (v) => setIsReadOnly(v);

    if (!isVisible) return null;

    const rows = property.rows || 4;

    if (property.controlType === 'TextArea') {
        const maxLength = property.maxLength === -1 || isReadOnly ? undefined : property.maxLength || 500;
        return (<TextArea rows={rows}
            placeholder={property.placeHolder}
            onChange={onChange}
            maxLength={maxLength}
            readOnly={isReadOnly}
            disabled={disabled}
            style={Base.setStyle(property.inputStyle)}
            value={value} />);
    }

    if (property.controlType === "Search") {
        return (<Search placeholder={property.placeHolder}
            onChange={onChange}
            maxLength={property.maxLength}
            onSearch={onSearch}
            readOnly={isReadOnly}
            enterButton={property.isEnterButton}
            disabled={disabled}
            value={value} />);
    }

    const type = isReadOnly ? 'text' : (property.controlType || 'text');

    const value2 = property.isDate && value ? value.substr(0, 10) : value;

    return (
        <Input placeholder={property.placeHolder}
            onChange={onChange}
            maxLength={property.maxLength}
            readOnly={isReadOnly}
            disabled={disabled && !isReadOnly}
            type={type}
            style={Base.setStyle(property.inputStyle)}
            prefix={Base.renderPrefix(property)}
            size={property.size}
            addonAfter={reneraddonAfter(property, pageId, value2)}
            onPressEnter={onPressEnter}
            onBlur={onBlur}
            value={value2} />
    );
};